<template>
	<view>
		{{Areaaddress}}
		<city-select @cityClick="cityClick" :formatName="formatName" :activeCity="activeCity" :hotCity="hotCity" :obtainCitys="obtainCitys"
		 :isSearch="true" ref="citys"></city-select>
	</view>
</template>

<script>
	import citys from './citys.js'
	import citySelect from '@/components/city-select/city-select.vue'
	export default {
		data() {
			return {
				Areaaddress: '', //当前位置
				//需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数）
				formatName: 'title',
				//当前城市
				activeCity: {
					id: 1,
					title: '南京市'
				},
				//热门城市
				hotCity: [{
						id: 0,
						title: '南京市'
					},
					{
						id: 1,
						title: '南京市'
					}
				],
				//显示的城市数据
				obtainCitys: [{
						id: 0,
						title: '南京'
					},
					{
						id: 1,
						title: '北京'
					},
					{
						id: 2,
						title: '天津'
					},
					{
						id: 3,
						title: '东京'
					}
				]
			}
		},
		components: {
			citySelect
		},
		onLoad() {
			this.getAuthorizeInfo();
			this.getLocationInfo();
			//动态更新数据
			setTimeout(() => {
				//修改数据格式
				this.formatName = 'cityName'
				//修改当前城市
				this.activeCity = {
					cityName: '南京',
					cityCode: 110100
				}
				//修改热门城市
				this.hotCity = [{
						cityName: '南京',
						cityCode: 110100
					},
					{
						cityName: '北京',
						cityCode: 110102
					}
				]
				//修改构建索引数据
				this.obtainCitys = citys
				uni.showToast({
					icon: 'none',
					title: '更新数据成功',
					// #ifdef MP-WEIXIN
					duration: 3000,
					// #endif
					mask: true
				})
			}, 5000)
		},
		methods: {
			getAuthorizeInfo(a = "scope.userLocation") { //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this = this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail() { //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo() { //2. 获取地理位置
				var _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res)
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
								'&key=EDNBZ-2JBRP-BPYD5-LLB7K-GA5XQ-CEF4X',
							success(re) {
								console.log("中文位置")
								console.log(re)
								_this.Areaaddress = re.data.result.address;
								if (re.statusCode === 200) {
									console.log("获取中文街道地理位置成功")
								} else {
									console.log("获取信息失败，请重试！")
								}
							}
						});
					}
				});
			},
			cityClick(item) {
				uni.showToast({
					icon: 'none',
					title: 'item: ' + JSON.stringify(item),
					// #ifdef MP-WEIXIN
					duration: 3000,
					// #endif
					mask: true
				})
			}
		}
	}
</script>

<style></style>
